<template>
  <span class="fileBox" :curRef="curRef" :curId="curId">
    <input type="file" :id="inputId" :ref="inputRef" accept="image/*" @change="change">
  </span>
</template>
<script>
  export default {
    name : 'uploadImg',
    data(){
      return{
        inputRef : '',
        // inputFile : null,
        base64Img : null,
        inputId : null,
      }
    },
    props:{
      'curRef':{
        /*设置ref*/
        type: String,
        default: null
      },
      'curId':{
        /*设置ref*/
        type: String,
        default: null
      }
    },
    mounted() {
      this.inputRef = this.curRef || 'ref'+ Math.floor(Math.random()*(1-10000) + 10000);
      this.inputId = this.curId || 'id'+ Math.floor(Math.random()*(1-10000) + 10000);
    },
    methods:{
      changeEmit(res){
        let param = {
          inputFile : res.inputFile,
          base64Img : res.base64Img,
          inputRef :  this.inputRef,//传ref,判断input
        };
        this.$emit('inputChange',param );
      },
      change(){
        let thiz = this;
        let ref = this.inputRef;
        let files = this.$refs[ref].files;
        let inputFile = files[0];
        require('../common/js/compressImg').compressImg(inputFile).then(res => {
          thiz.$refs[ref].value = '';
          thiz.changeEmit(res);
        });
      },
    }
  }
</script>
<style lang="less" scoped>
  .fileBox , .fileBox>input{
    opacity: 0;display: inline-block;width: 0;height: 0;overflow: hidden;border:0;margin: 0;padding: 0;
  }
</style>
